<template>
  <div class="home-menu">
    <a-menu>
      <a-menu-item v-for="(item,index) in meun" :key="index" @click="clickMenu(item)">{{item.name}}</a-menu-item>
    </a-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Store, useStore } from "vuex";
import { IGlobalState } from '@/store';
import {routes} from '@/router/index';
import { useRouter } from "vue-router";

function filterMenu(store: Store<IGlobalState>, route: Array<any>): any{
  let res: any[] = [];
  let roures = route[0].children
  for(let i = 0; i < roures.length; i++) {
    if(store.state.user.auth.includes(roures[i].meta.auth)) {
      res.push(roures[i])
    }
  }
  return res
}


export default defineComponent({
  props: {
    
  },
  emits: [],
  setup(props, context) {
    let store = useStore<IGlobalState>();
    let meun = filterMenu(store,routes);
    let router = useRouter();
    function clickMenu(item: any) {
      router.push(item.path)
    }
    return {
      meun,
      clickMenu
    }
  }
})
</script>

<style scope>
.home-menu{
  position: fixed;
  left: 20px;
  top: 40px;
  bottom: 0;
  width: 200px;
}
</style>